<template lang="pug">
  el-amap(
    ref="elAmap"
    class="amap-page-container map-page-container"
    vid="amap"
    :zoom="zoom"
    :expandZoomRange="true"
    :doubleClickZoom="true"
    :resizeEnable="true"
    :center="localCenter")
    //- 坐标点
    div(v-for="(marker, index) in markersList"
      :key="'m_'+marker.id+'_'+index")
      el-amap-marker(
        v-if="marker.showMarker"
        vid="marker"
        class="amap-marker"
        :title="marker.subtext"
        :position="marker.position"
        :icon="marker.icon"
        :events="marker.events"
        :visible="marker.visible"
        :draggable="marker.draggable")
    el-amap-polyline(
      v-for="(marker, index) in markersList"
      :key="'p_'+marker.id+'_'+index"
      :path="marker.polyLinePaths.path"
      :strokeColor="marker.strokeColor"
      :visible="true"
      :strokeOpacity="1")
    //- el-amap-polyline(
    //-   :path="p0"
    //-   :visible="true"
    //-   :strokeOpacity="1")
    //- el-amap-polyline(
    //-   :path="p2"
    //-   :visible="true"
    //-   :strokeOpacity="1")
    //- 信息体
    el-amap-info-window(
      v-if="isShowMessage"
      v-bind="infoWindows"
      class="ampa-info-window"
      :isCustom="true"
      :showShadow="true"
      :position="infoWindows.position"
      :content="infoWindows.content"
      :visible="infoWindows.visible"
      :offset="infoWindows.offset"
      :events="infoWindows.events"
      :closeWhenClickMap="true")
    //- 圆
    .screenFull.iconfont.icon-ffullScreen(
      v-if="isScreenAble"
      @click="screenZoomMap")
</template>

<script>
/**
 * @name 简单的地图展示
 * @author linmn
 */
import { AMapManager } from 'vue-amap'
export default {
  name: 'LocalMap',
  components: {
    AMapManager
    // MapPolyline
  },
  props: {
    mapDatas: {
      type: Array,
      default: () => []
    }, // 坐标数据
    mapPaths: {
      type: Object,
      default: () => {
        return {}
      }
    }, // 坐标点轨迹
    zoom: {
      type: Number,
      default: 14
    },
    screenAble: {
      type: Boolean,
      default: false
    }, // 是否需要全屏（目前地图默认全屏，地图大小由父组件外框决定）
    infoList: {
      type: Array,
      default: () => []
    }, // 信息窗体列表
    columns: {
      type: Object,
      default: () => {
        return {}
      }
    }, // 信息窗体字典
    center: Array
  },
  data () {
    return {
      isScreenAble: this.screenAble,
      localCenter: this.center,
      isShowMessage: false,
      markersList: [], // 点列表
      infoWindows: [], // 信息窗体
      isShowPath: true,
      relationList: []
    }
  },
  mounted () {
    const columnsList = this.columns
    const relation = Object.keys(columnsList).filter(key => columnsList[key].relation).map(key => columnsList[key].relation)
    this.$getRelation({
      relations: relation.join(',')
    }).then(data => {
      this.relationList = data
      this.initSettingMarkers()
    })
  },
  watch: {
    mapDatas (datas) {
      this.initSettingMarkers(datas)
    }
  },
  methods: {
    // 初始化坐标点
    initSettingMarkers (datas) {
      const _this = this
      const markers = datas || this.mapDatas
      // if (!markers.length) return
      const mixDatas = markers.map((data, index) => {
        const position = data.position
        // if (!data.length) {
        //   this.isShowMessage = false
        // }
        return {
          ...data,
          strokeColor: _this.renterRandomColor(index),
          polyLinePaths: {
            path: data.position
            // color: _this.renterRandomColor(index)
          },
          position: position,
          events: {
            click: (a) => {
              this.isShowMessage = true
              // 窗体信息
              this.infoWindows = {
                position: position,
                content: `<div
                  style="white-space: nowrap;
                  border:1px solid #ddd;
                  padding:10px;
                  background:rgba(0,0,0,0.5);
                  color: #fff;">
                  ${this.getMarkInfo(data)}
                </div>`,
                offset: [90, -20],
                visible: true,
                events: {
                  close () {
                    _this.isShowMessage = false
                  }
                }
              }
            }
          }
        }
      })
      this.markersList = mixDatas
      // 默认中心显示第一个标识中心
      this.center = mixDatas.length
        ? mixDatas[0].position && mixDatas[0].position.length ? mixDatas[0].position : this.$config.lonlat
        : this.$config.lonlat
    },
    // 获取坐标点信息
    getMarkInfo (data) {
      if (!data.content) return data.title
      let content = ''
      this.infoList.map(key => {
        let infoTime = data.content[key] ? (this.columns[key].render && this.columns[key].render.type === 'time' ? this.$moment(data.content[key]).format(this.columns[key].dateType) : data.content[key]) : ''
        if (this.columns[key].relation !== undefined && this.relationList[this.columns[key].relation] !== undefined) {
          this.relationList[this.columns[key].relation].forEach(item => {
            if (data.content[key] !== undefined && item.value === data.content[key]) {
              infoTime = item.label
            }
          })
        }
        content += `<p style="margin: 0; font-size: .2em">${this.columns[key].label}：${infoTime}</p>`
      })
      return content
    },
    // 初始化路径
    initPaths () {
    },
    // 随机颜色
    renterRandomColor (index = -1) {
      const INDEX = index || Math.random()
      return `#${Math.floor((INDEX + 2) * 0xeeeee).toString(16)}`
    },
    /* 全屏显示 ----默认已经是全屏了 */
    screenZoomMap () {
      this.$emit('screenZoomMap', true)
    }
  }
}
</script>
<style lang="sass" scoped>
.screenFull
  position: absolute
  bottom: 5%
  right: 2%
  font-size: 25px
  z-index: 0
  cursor: pointer
.screenFull::before
  padding: 10px
  background: #fff
  border-radius: 15%
  box-shadow: 0px 1px 2px #ccc
.ampa-info-window
  background: rgba(0,0,0,.4)
.map-page-container
  /* min-height: 500px */
</style>
